{% extends 'game/base.html' %}
{% block style %}
	.game_rank{
		width:100%;
		height:80%;
	}
    .btn_list{
        width:100%;
        height:20%;
    }
{% endblock %}
{% block main %}
    <div style="text-align: center"><h5>游戏天梯榜</h5></div>
    <div id='rank_echarts' class='game_rank' ></div>
    <div id='rank_button' class="btn_list"></div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
    var rank_echarts = echarts.init(document.getElementById('rank_echarts'));
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // Use axis to trigger tooltip
          type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value'
      },
      yAxis: {
        type: 'category',
        data: {{ game_list|safe }}
      },
      series: [
          {
              name: '注册人数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: {{ reg_nums }}
          },
          {
              name: '登陆人数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: {{ login_nums }}
          },
          {
              name: '充值人数',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: {{ pay_nums }}
          },
          {
              name: '充值金额',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: {{ total_charge }}
          },
      ]
    };

    rank_echarts.setOption(option);
    </script>
{% endblock %}